<template>
	<view class="">
		<view class="top">
			<view class="back">
				<image @click="back" src="@/static/img/common/topBack.png" alt="" />
			</view>
		</view>
		<view class="con">
			<view class="yjTitle">
				{{title}}
			</view>
			<view class="num">
				<image src="@/static/img/index/zxIcon3.png" mode=""></image>
				{{size}}个实验
			</view>
			<view class="info">
				{{content == null ? '' : content}}
			</view>
			<view class="title2">
				单个实验
			</view>
			<view class="item _df _ac _jb" v-for="(item,index) in pageList" :key="index" @click="toTest(item)">
				<view class="number">
					{{index + 1}}
				</view>
				<view class="text">
					<view class="title clamp1">
						{{item.experimentName}}
					</view>
					<view class="name clamp1">
						{{item.experimentType}}
					</view>
				</view>
				<image src="@/static/img/index/zxIcon4.png" mode=""></image>
			</view>
			<view class="h10">

			</view>
			<!-- <view class="btn _df _ac _jc" @click="toTest(item)">
				<image src="@/static/img/index/zxIcon5.png" mode=""></image>
				开始整组实验
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList: [],
				page: {
					pageParam: {
						pageNum: 1,
						pageSize: 10,
					}
				},
				totalPage: 1,
				token: "",
				id: 0,
				content: 0,
				size: 0,
				title: 0,
			};
		},
		onLoad(options) {
			if (options) {
				this.id = options.id
				this.content = options.content
				this.size = options.size
				this.title = options.title
			}
			this.getPageList()
		},
		onShow() {

		},
		methods: {
			back() {
				uni.navigateBack(-1)
			},
			toTest(dom) {
				if(dom.experimentType == '视频'){
					uni.navigateTo({
						url: '/pages/comA/zhixin/videoTest?strId=' + dom.strId + "&id=" + dom.id.toString()
					})
				}else{
					uni.navigateTo({
						url: '/pages/comA/zhixin/test?strId=' + dom.strId + "&id=" + dom.id.toString()
					})
				}
				
			},
			getPageList() {
				let thisData = this;

				let data = {
					"url": "/admin/app/semSingleGroup/view?id=" + this.id,
					"data": null
				}
				uni.$_post({
					url: "getRequestResult",
					that: thisData,
					params: data,
					success(res) {
						let _data = res.data.data.semSingleExperimentList;
						if (res.data.success) {
							//分页
							if (_data.length == 0) {
								thisData.totalPage = 0;
							}
							if (thisData.page.pageParam.pageNum > 1) {
								thisData.pageList = thisData.pageList.concat(_data);
							} else {
								thisData.pageList = _data;
							}
							// this.$refs.more.status = "loadmore";
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon: 'error'
						});
					},
				});
			},


		},
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 450rpx;
		padding: 100rpx 30rpx 0 40rpx;
		box-sizing: border-box;
		background: url(@/static/img/index/zxBg1.png) no-repeat center / cover;

		.back {

			// position: absolute;
			// top: 50%;
			// left: 0;
			// transform: translateY(-50%);
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	.con {
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: -50rpx;
		z-index: 2;
		position: relative;
		// height: calc(100vh - 450rpx);
		// overflow-y: auto;
		padding: 70rpx 30rpx;

		.yjTitle {
			font-size: 48rpx;
			font-family: $uni-font-family-Bold;
			color: #000;
			margin-bottom: 20rpx;
		}

		.num {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;

			image {
				width: 18rpx;
				height: 20rpx;
				margin-right: 12rpx;
			}
		}

		.info {
			font-size: 24rpx;
			line-height: 36rpx;
			color: #666;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 50rpx;
		}

		.title2 {
			font-size: 32rpx;
			font-family: $uni-font-family-Heavy;
			color: #000;
			margin-bottom: 20rpx;
		}

		.item {
			height: 140rpx;
			background: #f5f5f5;
			border-radius: 24rpx;
			padding: 0 40rpx;
			margin-bottom: 30rpx;

			.number {
				font-size: 48rpx;
				font-family: $uni-font-family-Heavy;
				color: #B7B7B7;
				margin-right: 40rpx;
			}

			.text {
				margin-right: auto;

				.title {
					font-size: 30rpx;
					font-family: $uni-font-family-Heavy;
					color: #141414;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 22rpx;
					color: #888;
				}

			}

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.btn {
		width: 100%;
		height: 100rpx;
		background: #5a64c5;
		border-radius: 50rpx;
		color: #fff;
		font-size: 32rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}
</style>